const form = document.getElementById("todo-form");
const todoList = document.getElementById("todo-list");

async function getItems(){
    const items = await (await fetch("/todo.php")).json();
    // update the todo list on the page
    todoList.innerHTML = "";
    items.forEach(item => {
        const todoItem = document.createElement("li");
        todoItem.innerHTML = `
        <input type="checkbox" ${item.completed == "1" ? "checked" : ""} />
        <span>${item.text}</span>
        <button class="delete-button">Delete</button>
      `;
        todoList.appendChild(todoItem);
    });
}

getItems();


// Add a new todo item
form.addEventListener("submit", async event => {
    event.preventDefault(); // prevent the form from refreshing the page

    const input = document.getElementById("new-todo");
    const todoText = input.value.trim(); // get the text of the new todo item
    // console.log(todoText);

    if (todoText === "") {
        // event.preventDefault();
        return; // don't add an empty todo item
    }
    // const completed = document.getElementById("completed").checked; // get the completed status of the new todo item

    // send a request to the PHP script to add the new todo item to the database
    const response = await fetch("/todo.php", {
        method: "POST",
        body: JSON.stringify({ text: todoText }),
        // body: JSON.stringify({ text: todoText, completed }),
        headers: { "Content-Type": "application/json" }
    });
    console.log(todoText);
    // retrieve the updated list of todo items from the database
    const items = await (await fetch("/todo.php")).json();


    // update the todo list on the page
    todoList.innerHTML = "";
    items.forEach(item => {
        const todoItem = document.createElement("li");
        todoItem.innerHTML = `
      <input type="checkbox" ${item.completed == "1" ? "checked" : ""} />
      <span>${item.text}</span>
      <button class="delete-button">Delete</button>
    `;
        todoList.appendChild(todoItem);
    });

    // reset the form
    input.value = "";
});

// Delete a todo item
todoList.addEventListener("click", async event => {
    if (event.target.className === "delete-button") {
        const todoItem = event.target.parentNode;
        const text = todoItem.querySelector("span").textContent;

        // send a request to the PHP script to delete the todo item from the database
        await fetch("/todo.php", {
            method: "DELETE",
            body: JSON.stringify({text}),
            headers: {"Content-Type": "application/json"}
        });

        // retrieve the updated list of todo items from the database
        const items = await (await fetch("/todo.php")).json();

        // update the todo list on the page
        todoList.innerHTML = "";
        items.forEach(item => {
            const todoItem = document.createElement("li");
            todoItem.innerHTML = `
        <input type="checkbox" ${item.completed == "1" ? "checked" : ""} />
        <span>${item.text}</span>
        <button class="delete-button">Delete</button>
      `;
            todoList.appendChild(todoItem);
        });
    }else
    {
        const todoItem = event.target.parentNode;
        const text = todoItem.querySelector("span").textContent;

        await fetch("/todo.php", {
            method: "UPDATE",
            body: JSON.stringify({text}),
            headers: {"Content-Type": "application/json"}
        });

        // retrieve the updated list of todo items from the database
        const items = await (await fetch("/todo.php")).json();

        // update the todo list on the page
        todoList.innerHTML = "";
        items.forEach(item => {
            const todoItem = document.createElement("li");
            todoItem.innerHTML = `
        <input type="checkbox" ${item.completed == "1" ? "checked" : ""} />
        <span>${item.text}</span>
        <button class="delete-button">Delete</button>
      `;
            todoList.appendChild(todoItem);
        });
    }
});

